<!--
 * @Date: 2023-11-16 19:08:42
 * @LastEditTime: 2023-11-30 18:30:38
 * @Description: content
-->
<template>
  <view class="content">
    <uni-nav-bar
      left-icon="left"
      title="我的收藏"
      color="#fff"
      backgroundColor="transparent"
      :fixed="true"
      :statusBar="true"
      :border="false"
      @clickLeft="$c.back"
    ></uni-nav-bar>

    <scroll-view class="tab" scroll-x>
      <view
        class="tab-item"
        v-for="(item, i) in tabList"
        :key="i"
        :class="{
          act: tabCur == i
        }"
        @click="tabChange(i)"
      >
        {{ item.title }}
      </view>
    </scroll-view>

    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="getList"
      :down="downOption"
      :up="upOption"
    >
      <view class="list">
        <view
          class="list-item"
          v-for="(item, i) in listData"
          :key="i"
          @click="toDetail(item)"
        >
          <view class="pic">
            <image :src="item.imgurl" lazy-load></image>

            <!-- <view class="new">
              <image :src="$img('/static/img/new.png')" lazy-load></image>
            </view> -->

            <view
              class="type common_bg"
              :style="{
                backgroundImage: `url(${$img('/static/img/tag_bg.png')})`
              }"
            >
              <text>{{ tabList[tabCur].title }}</text>
            </view>
          </view>

          <view class="title hang1">
            {{ item.goods_title }}
          </view>

          <!-- <view class="hot-num">
            <template v-if="true">{{ 23333 }}次参与</template>

            <template v-else>快去参与吧</template>
          </view> -->

          <view class="price-box">
            <view class="price">
              ¥
              <text>{{ item.goods_price }}</text>
            </view>

            <view v-if="item.stock" class="num-box">
              <view class="num">{{ item.surplus_stock }}/{{ item.stock }}</view>

              <view class="box icon">
                <image :src="$img('/static/img/box.png')" lazy-load></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 下拉刷新的配置(可选, 绝大部分情况无需配置)
      downOption: {
        auto: false
      },
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        auto: true,
        page: {
          size: 10 // 每页数据的数量,默认10
        }
      },
      tabList: [
        {
          id: 1,
          title: '一番赏'
        },
        {
          id: 2,
          title: '无限赏'
        },
        {
          id: 3,
          title: '擂台赏'
        },
        // {
        //   id: 4,
        //   title: '抽卡机'
        // },
        {
          id: 5,
          title: '积分赏'
        },
        {
          id: 6,
          title: '全局赏'
        },
        // {
        //   id: 7,
        //   title: '福利盲盒'
        // },
        {
          id: 8,
          title: '领主赏'
        },
        {
          id: 9,
          title: '连击赏'
        }
      ],
      tabCur: 0,
      listData: []
    }
  },

  methods: {
    toDetail(e) {
      // 无限赏
      let url = '/pages/shouye/detail'

      if (e.type == 2 || e.type == 8) {
        url = '/pages/shouye/detail_wuxian'
      }

      if (e.type == 9) {
        url = '/package/index/lian-ji'
      }

      this.$c.to({
        url,
        query: {
          goods_id: e.goods_id,
          type_text: this.tabList[this.tabCur].title
        }
      })
    },

    tabChange(i) {
      this.tabCur = i
      this.listData = []

      this.mescroll.resetUpScroll()
      this.mescroll.scrollTo(0, 0)
    },

    /**
     * @description: 获取列表
     * @param {*} num
     * @param {*} size
     * @return {*}
     */
    getList({ num, size }) {
      this.req({
        url: 'listCollect',
        data: {
          page: num,
          type: this.tabList[this.tabCur].id
        },

        success: res => {
          if (res.status == 1) {
            if (num == 1) {
              this.listData = []
            }

            this.listData = this.listData.concat(res.data.data)
            this.mescroll.endByPage(res.data.data.length, res.data.last_page)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  .tab {
    white-space: nowrap;

    .tab-item {
      position: relative;
      display: inline-flex;
      margin-left: 30rpx;
      padding: 20rpx 0;

      &:last-child {
        margin-right: 30rpx;
      }

      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;

      &.act {
        color: transparent;
        background: linear-gradient(
          90deg,
          #6adeff 0%,
          #7ab5ff 50%,
          #ff7feb 100%
        );
        background-clip: text;

        &::before {
          content: '';
          display: block;
          width: 32rpx;
          height: 4rpx;
          background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
          border-radius: 2rpx;
          position: absolute;
          left: 50%;
          bottom: 8rpx;
          transform: translateX(-50%);
        }
      }
    }
  }

  .list {
    padding: 1rpx 30rpx 30rpx;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    .list-item {
      width: 330rpx;
      background: #000000;
      border: 1px solid #4a4951;
      margin-top: 30rpx;

      .pic {
        width: 100%;
        height: 330rpx;
        position: relative;

        image {
          width: 100%;
          height: 100%;
        }

        .new {
          position: absolute;
          width: 100rpx;
          height: 56rpx;
          z-index: 1;
          left: 0;
          top: 0;
        }

        .type {
          position: absolute;
          z-index: 1;
          right: 4rpx;
          top: 4rpx;
          height: 50rpx;
          padding: 0 18rpx;
          display: flex;
          align-items: center;

          text {
            font-size: 30rpx;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            color: transparent;

            background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
            background-clip: text;
          }
        }
        .common_bg {
        }
      }

      .title {
        padding: 20rpx 20rpx 0;

        font-size: 28rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
      .hang1 {
      }

      .hot-num {
        padding: 10rpx 20rpx 0;

        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #cccccc;
      }

      .price-box {
        padding: 10rpx 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .price {
          font-size: 28rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: transparent;

          background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
          background-clip: text;

          text {
            font-size: 36rpx;
          }
        }

        .num-box {
          display: flex;
          align-items: center;

          .num {
            font-size: 24rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #cccccc;
          }

          .box {
            width: 26rpx;
            height: 26rpx;
            margin-left: 6rpx;
          }
          .icon {
          }
        }
      }
    }
  }
}
</style>
